<div class="yl2-content">
    <h5 class="mb-4" style="padding: 20px,0px;">
        <i class="fa fa-cubes"></i> 物料需求信息
    </h5>

    <!-- <div class="m-portlet__head" style="height: 50px; padding: 15px;">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title"></div>
            </div>
        </div> -->
    <div style="padding: 15px;">
        <div *ngFor="let rm of techDocView.materials">
            <p-table [value]="techDocView.materials">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width:25%; height: 30px; text-align:center;">
                            名称
                        </th>
                        <th style="width:25%; height: 30px; text-align:center;">
                            原材料牌号
                        </th>
                        <th style="width:25%; text-align:center;">规格</th>
                        <th style="width:25%; text-align:center;">
                            计量单位
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData>
                    <tr>
                        <td style="text-align:center; height: 30px;">
                            {{ rowData.category }}
                        </td>
                        <td style="text-align:center;">
                            {{ rowData.grade }}
                        </td>
                        <th style="text-align:center;">
                            {{ rm.hardness }}
                        </th>
                        <td style="text-align:center;">
                            {{ rowData.remark }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>

            <p-table [value]="techDocs.materials">
                <ng-template pTemplate="header">
                    <tr>
                        <!-- <th style="width:13%; height: 30px; text-align:center;">种类</th> -->
                        <th style="width:25%; text-align:center;">
                            原材料技术条件
                        </th>
                        <!-- <th style="width:13%; text-align:center;">长度</th> -->
                        <th style="width:13%; text-align:center;">数量</th>
                        <!-- <th style="width:18%; text-align:center;">单件质量kg</th>
                            <th style="width:18%; text-align:center;">全套质量kg</th> -->
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData>
                    <tr>
                        <!-- <th style="text-align:center; height: 30px;">{{ rm.category }}</th> -->
                        <td style="text-align:center;">
                            {{ rowData.size }}
                        </td>
                        <!-- <th style="text-align:center;">{{ rm.length }}</th> -->
                        <td style="text-align:center;">
                            {{ rowData.amount }}
                        </td>
                        <!-- <th style="text-align:center;">{{ rm.weightPerProduct }}</th>
                            <th style="text-align:center;">{{ rm.weight }}</th> -->
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>

    <div class="primeng-datatable-container">
        <div *ngIf="outs.length" class="mb-4">
            <h5 class="mb-4"><i class="fa fa-list"></i> 材料出库信息</h5>
            <p-table
                [value]="outs"
                rows="5"
                [paginator]="false"
                [scrollable]="true"
                ScrollWidth="100%"
                [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th width="80px">
                            出库数量
                        </th>
                        <th
                            *ngFor="let col of selectedColumns"
                            width="{{ col.width }}"
                        >
                            {{ col.header }}
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record>
                    <tr>
                        <td width="80px">{{ record.itemAmount }}</td>
                        <td
                            *ngFor="let col of selectedColumns"
                            width="{{ col.width }}"
                        >
                            {{ record[col.field] }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>

        <h5 class="mb-4"><i class="fa fa-table"></i> 材料库存信息</h5>
        <p-table
            #dataTable
            (onLazyLoad)="getCharges($event)"
            [value]="charges"
            rows="10"
            [paginator]="false"
            [lazy]="true"
            dataKey="id"
            [scrollable]="true"
            ScrollWidth="100%"
            [responsive]="primengTableHelper.isResponsive"
            rowExpandMode="multiple"
            [resizableColumns]="primengTableHelper.resizableColumns"
        >
            <ng-template pTemplate="caption">
                <div class="row align-items-center m--margin-bottom-10">
                    <div class="col-xl-4" style="text-align:left">
                        <p-multiSelect
                            [options]="cols"
                            [(ngModel)]="selectedColumns"
                            optionLabel="header"
                            selectedItemsLabel="已选择 {0} 列"
                            [style]="{ padding: 0 }"
                            defaultLabel="Choose Columns"
                        >
                        </p-multiSelect>
                    </div>
                    <div class="col-xl-8">
                        <div
                            class="form-group m-form__group align-items-center mb-0"
                        >
                            <div class="input-group">
                                <input
                                    [(ngModel)]="filterText"
                                    name="filterText"
                                    autofocus
                                    class="form-control m-input"
                                    [placeholder]="l('SearchWithThreeDot')"
                                    type="text"
                                    (keyup.enter)="getCharges($event)"
                                />
                                <span class="input-group-btn">
                                    <button
                                        (click)="getCharges($event)"
                                        class="btn btn-primary"
                                        type="button"
                                    >
                                        <i
                                            class="flaticon-search-1"
                                            [attr.aria-label]="l('Search')"
                                        ></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 25px"></th>
                    <th width="80px">
                        库存总量
                    </th>
                    <th
                        *ngFor="let col of selectedColumns"
                        width="{{ col.width }}"
                    >
                        {{ col.header }}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-record let-expanded="expanded">
                <tr>
                    <td style="width: 25px">
                        <a href="javascript:;" [pRowToggler]="record">
                            <i
                                [ngClass]="
                                    expanded
                                        ? 'pi pi-chevron-down'
                                        : 'pi pi-chevron-right'
                                "
                            ></i>
                        </a>
                    </td>
                    <th width="80px">
                        {{ record.materialForProduct.itemAmount }}
                    </th>
                    <td
                        *ngFor="let col of selectedColumns"
                        width="{{ col.width }}"
                    >
                        {{ record.materialForProduct[col.field] }}
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="rowexpansion" let-record>
                <tr>
                    <td [attr.colspan]="selectedColumns.length + 2">
                        <tr>
                            <th width="100px">出库</th>
                            <th width="80px">可用数量</th>
                            <th width="200px">位置</th>
                            <th></th>
                        </tr>

                        <tr>
                            <th width="100px">
                                <button
                                    type="button"
                                    class="btn btn-success btn-sm"
                                    (click)="
                                        yl2OutModal.show(
                                            record.id,
                                            record.materialForProduct.id,
                                            pipe.barCode,
                                            pipe.id
                                        )
                                    "
                                >
                                    出库
                                </button>
                            </th>
                            <td width="80px">
                                {{ record.materialForProduct.itemAmount }}
                            </td>
                            <td width="200px">
                                {{ record.locationOfMaterial.displayName }}
                            </td>
                            <td></td>
                        </tr>
                    </td>
                </tr>
            </ng-template>
        </p-table>
        <div
            class="primeng-no-data"
            *ngIf="primengTableHelper.totalRecordsCount == 0"
        >
            没有找到适合的材料
        </div>
        <div class="primeng-paging-container">
            <p-paginator
                rows="5"
                #paginator
                (onPageChange)="getCharges($event)"
                [totalRecords]="primengTableHelper.totalRecordsCount"
                [rowsPerPageOptions]="
                    primengTableHelper.predefinedRecordsCountPerPage
                "
            >
            </p-paginator>
            <span class="total-records-count">
                总计：{{ primengTableHelper.totalRecordsCount }}
            </span>
        </div>
    </div>
    <yl2OutModal #yl2OutModal (modalSave)="reloadPage()"></yl2OutModal>
</div>
